import {useRequest} from "ahooks";
import {getHeadUrl} from "@src/services/userinfo.ts";
import React, {useEffect, useState} from "react";
import "./index.scss"

interface HeadListProps {
    onChange?: (url: string) => void,
    getHeadUrlData?: (data: string[]) => void
    addHeadUrl?: string[]
};


const HeadList: React.FC<HeadListProps> = ({onChange, getHeadUrlData, addHeadUrl, ...props}) => {
    const getHeadUrlApi = useRequest(getHeadUrl, {manual: true});
    const [index, setIndex] = useState(0);
    const [getHeadUrlApiData, setGetHeadUrlApiData] = useState<string[]>([]);
    useEffect(() => {
        getHeadUrlApi.runAsync().then((data) => {
            getHeadUrlData?.(data)
            if (addHeadUrl) data.unshift(...addHeadUrl)
            setGetHeadUrlApiData(data)
        })
    }, [])
    return <div className="head-list" {...props}>
        <ul>
            {getHeadUrlApiData?.map((item, i) =>
                <li className={index == i ? "active" : ""} key={item+i}
                    onClick={() => {
                        setIndex(i);
                        onChange?.(item)
                    }}>
                    <img className="userHead" src={item} alt=""/>
                </li>
            )}
        </ul>
    </div>
}
export default HeadList;